import 'package:flutter/material.dart';
import '../model/post.dart';

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.white,
    // );
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            elevation: 0.0,
            // title: Text('List'),
            pinned: true,
            // floating: true,
            expandedHeight: 180.0,
            flexibleSpace: FlexibleSpaceBar(
              // centerTitle: true,
              titlePadding: EdgeInsets.all(10.0),
              // title: Text(
              //   'Flutter',
              //   style: TextStyle(color: Colors.grey, fontSize: 20.0, fontWeight: FontWeight.bold),
              // ),
              title: Image.network(posts[1].imageUrl, width: 40.0, height: 40.0,),
              background: Image.network(
                posts[0].imageUrl,
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.all(10.0),
              sliver: SliverListDemo(),
            ),
          ),
        ],
      ),
    );
  }
}

class SliverListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(10.0),
            color: Colors.grey[100],
            child: Stack(
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 1 / 1,
                  child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  top: 10.0,
                  left: 10.0,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        posts[index].title,
                        style: TextStyle(
                          fontSize: 20.0,
                          color: Colors.black26,
                        ),
                      ),
                      Text(
                        posts[index].author,
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.black26,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        },
        childCount: posts.length,
      ),
    );
  }
}

class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        childAspectRatio: 1.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.white,
            child: Image.network(
              posts[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        },
        childCount: posts.length,
      ),
    );
  }
}
